<template>
<div class="app-container">
  <loading v-show="loading"></loading>
  <el-card class="box-card searchFormStyle" style="margin-bottom:1%;">
    <div slot="header" class="clearfix">
      <span>指标类型操作</span>
    </div>
    <div class="text item">
      <el-form ref="searchData" :model="searchData" label-width="130px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="指标类型名称">
              <el-input v-model="searchData.typeName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item>
              <el-button type="primary" 
              icon="el-icon-plus" 
              v-if="permissionHandle('partyBranchType:openDialog')"
              @click="openDialog">新 增</el-button>
              <el-button type="primary" 
              icon="el-icon-search" 
              v-if="permissionHandle('partyBranchType:getList')"
              @click="getList">查 询</el-button>
              <el-button type="primary" 
              icon="el-icon-refresh" 
              v-if="permissionHandle('partyBranchType:getList')"
              @click="resetSearch">重 置</el-button>
              <el-button type="info" 
              icon="el-icon-delete" 
              v-if="permissionHandle('partyBranchType:handleDelete')"
              @click="deleteType">删 除</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </el-card>
  <el-card class="box-card" style="margin-bottom:1%;">
    <div slot="header" class="clearfix">
      <span>指标类型列表</span>
    </div>
    <el-table
      :data="tableData"
      border
      ref="tableData"
      style="width: 100%;margin-bottom:1%;"
      @selection-change="handleSelectionChange"
      >
      <el-table-column
        type="selection"
        width="40">
      </el-table-column>
      <el-table-column
        label="指标类型名称"
      >
        <template slot-scope="scope">
            {{ scope.row.typeName }}
        </template>
      </el-table-column>
      <el-table-column
        label="创建日期"
        width="180"
      >
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200px">
        <template slot-scope="scope">
          <el-button
            size="mini"
            icon="el-icon-delete"
            type="danger"
            v-if="permissionHandle('partyBranchType:handleDelete')"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination @handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange" :paginations="paginations"></pagination>
  </el-card>
  <!--新增参数类型-->
  <el-dialog title="新增指标类型" :visible.sync="dialogFormVisible" width="70%">
    <el-form :model="addForm" :rules="rules" ref="addForm" label-width="120px">
      <el-row>
          <el-col :span="12">
            <el-form-item label="指标类型名称" prop="typeName">
              <el-input v-model="addForm.typeName" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button icon="el-icon-refresh" @click="resetForm('addForm')">重置</el-button>
      <el-button type="primary" icon="el-icon-plus" @click="submitForm('addForm')">保存</el-button>
    </div>
  </el-dialog>
</div>
</template>
<script>
import Loading from '@/components/loading/loading'
import pagination from '@/components/pagination/index'
import { getPartyBranchType, addPartyBranchType, deletePartyBranchType } from '@/api/partyBranch/partyBranchType'
import { isvalidRequire } from '@/utils/validate'

// 非空
var validateRequire = (rule, value, callback) => {
  if (!isvalidRequire(value)) {
    callback(new Error('请输入必填项'))
  } else {
    callback()
  }
}
export default {
  components: {
    Loading,
    pagination
  },
  data() {
    this.permissionHandle = this.$permissionHandle
    return {
      paginations: {
        totalNum: 0,
        currentPage: 1,
        pageSize: 10
      },
      searchData: {
        typeName: '',
        pageSize: '10',
        pageNum: '1'
      },
      loading: false,
      tableData: [],
      // 新增角色数据
      addForm: {
        typeName: ''
      },
      deleteDepArry: [],
      dialogFormVisible: false, // 新增弹出框状态
      // 列表所选数据集合
      multipleSelection: [],
      rules: {
        typeName: [
          { required: true, message: '请输入指标类型名称' },
          { message: '数据不能包含特殊字符', validator: validateRequire },
          { min: 1, max: 170, message: '长度在 1 到 170 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    dialogFormVisible: function() {
      if (this.dialogFormVisible === false) {
        this.addForm = {
          typeName: '',
          typeDesc: ''
        }
        this.resetForm('addForm')
      }
    }
  },
  created() {
    this.getTypeList()
  },
  methods: {
    resetSearch() {
      this.searchData.typeName = ''
      this.getTypeList()
    },
    openDialog() {
      this.dialogFormVisible = true
    },
    // 新增参数类型
    addType() {
      this.loading = true
      return new Promise((resolve, reject) => {
        addPartyBranchType(this.addForm).then(response => {
          this.loading = false
          this.dialogFormVisible = false
          this.getList()
          resolve()
        }).catch(error => {
          this.loading = false
          reject(error)
        })
      })
    },
    getList() {
      this.searchData.pageNum = 1
      this.getTypeList()
      this.paginations.currentPage = 1
    },
    // 查询参数
    getTypeList() {
      this.loading = true
      return new Promise((resolve, reject) => {
        getPartyBranchType(this.searchData).then(response => {
          this.tableData = response.data.items
          this.paginations.totalNum = parseInt(response.data.itemsTotalCount)
          this.loading = false
          resolve()
        }).catch(error => {
          this.loading = false
          reject(error)
        })
      })
    },
    deleteType() {
      if (this.deleteDepArry.length) {
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          return new Promise((resolve, reject) => {
            deletePartyBranchType({ 'ndexTypeKey': JSON.stringify(this.deleteDepArry) }).then(response => {
              resolve()
              this.loading = false
              this.getList()
              this.deleteDepArry = []
            }).catch(error => {
              this.loading = false
              this.deleteDepArry = []
              reject(error)
            })
          })
        }).catch(() => {
          this.deleteDepArry = []
          this.$refs.tableData.clearSelection()
          return
        })
      } else {
        this.$message({
          showClose: true,
          message: '请至少选择一条要删除的数据',
          type: 'warning'
        })
      }
    },
    // 输入参数查询之后
    blurSearch(value) {
      this.getList()
    },
    handleDelete(index, row) {
      this.$refs.tableData.clearSelection()
      this.deleteDepArry = []
      this.deleteDepArry.push(row.ndexTypeKey)
      this.deleteType()
    },
    handleSelectionChange(val) {
      this.deleteDepArry = []
      this.multipleSelection = val
      this.multipleSelection.forEach(element => {
        this.deleteDepArry.push(element.ndexTypeKey)
      })
    },
    handleSizeChange(val) {
      this.searchData.pageSize = val
      this.getTypeList()
    },
    handleCurrentChange(val) {
      this.searchData.pageNum = val
      this.getTypeList()
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.addType()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      // this.dialogFormVisible = false
      this.$refs[formName].resetFields()
    }
  }
}
</script>
<style lang="scss">
  .tree-input{
    position: relative;
  }
  .input-tree{
      height:200px;width: 100%;
      .el-scrollbar__wrap{overflow: auto;}
    }
    .detail-col{height:40px;line-height: 40px;}
  .title-span{font-size: 16px;display:inline-block;width:100%;height:40px;line-height:40px;border-bottom:1px solid #e6e6e6}
</style>
